<template>
  <div class="page-wrapper" style="background-color: whitesmoke;height: 100%;position: absolute;width: 85%">
    <div class="content">
      <el-row style="margin-top: 8%">
        <div id="myChart" :style="{width: '50%', height: '400px'}"></div>
        <div id="round" :style="{width: '50%', height: '400px'}"></div>
      </el-row>
    </div>
  </div>
</template>

<script>
import * as echarts from "echarts";

export default {
  name:'HomeworkCharts',
  mounted() {
    this.drawBar();
  },
  methods: {
    drawBar() {
      // 基于准备好的dom，初始化echarts实例
      // 全局使用 echarts 初始化（this.$echarts）
      let myChart = echarts.init(document.getElementById('myChart'))
      let round = echarts.init(document.getElementById('round'))
      // 绘制图表
      myChart.setOption({
        title: {
          text: '202014班第一次作业'
        },
        tooltip: {},
        xAxis: {
          data: ["100-90", "90-80", "80-70", "70-60", "60-50", "50-40","40-30","30-20","20-10"]
        },
        yAxis: {},
        series: [{
          name: '分数',
          type: 'bar',
          data: [5, 6, 5, 8, 6, 4, 7, 8, 6],
          showBackground: true,
          backgroundStyle: {
            color: 'rgba(180, 180, 180, 0.2)'
          }
        }]
      });

      round.setOption({
        title: {
          text: '第一次作业',
          subtext: 'Fake Data',
          left: 'center'
        },
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: 'left'
        },
        series: [
          {
            name: 'Access From',
            type: 'pie',
            radius: '50%',
            data: [
              { value: 15, name: '满分人数' },
              { value: 8, name: '优秀人数' },
              { value: 10, name: '良好人数' },
              { value: 5, name: '不合格人数' },
            ],
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      })
    }
  }
};
</script>